<template>
  <div class="MenBar">
  		<ul>
	  			<li>
	  				<router-link to="/">
	  					<span class="iconfont" >&#xe6b7;</span>
	  					<span class="text">首页</span>
	  				</router-link>
	  			</li>
	  			<li>
	  				<router-link to="/Classify">
	  					<span class="iconfont">&#xe615;</span>
	  					<span class="text">分类</span>
	  				</router-link>
	  			</li>
	  			<li>
	  					<router-link to="/ShopCar">
	  						<span class="iconfont">&#xe64c;</span>
	  						<span class="text">购物车</span>
	  					</router-link>
	  			</li>
	  			<li>
	  				<router-link to="/User">
	  					<span class="iconfont">&#xe600;</span>
	  					<span class="text">用户</span>
	  				</router-link>
	  			</li>
	  			
  		</ul>
  </div>
</template>

<script>
export default {
  name: 'MainMenu'
  
}
</script>

<style lang="scss" scoped>
.MenBar{
		width:100%;
		height:100px;
		background: #fff;
		border: 2px solid #ccc;
		bottom:0px;
		position:fixed;
		z-index: 999;
		ul{
				 display: flex;
				 height: inherit;
					li{
						width: 25%;
						 a{
							 	display:flex;
							 	height: 100%;
							 	width: 100%;
							 	flex-direction:column;
							 	align-items: center;
							 	justify-content: center;		
							 	span{
							 		display: block;
							 		margin: 7px 0;
							 		color: #666666;
							 	}
							 	.iconfont{
							 			font-size: 38px;
							 			
							 	}
							 	.text{
							 			font-size: 23.44px;
							 	}	
										 	
						 }
						  	.router-link-exact-active 
							 	{
							 		span{
							 			color: #ff9900;
							 		}
							 	}	
					}
			}
		}
</style>
